import React from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import Images from '@ASSET/Images'
import { getTagIds, isShowVideo, openPage } from '@UTILS/common'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { TagITF } from '@INTERFACES/Tag'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import Navigate from '@NAVIGATION/navigateManager'
import { useSelector } from 'react-redux'
import { STORE_ROUTER_DATA } from '@CONSTANTS/common'
import { RootStateITF } from '@REDUXITF/index'
import { PatientStateITF } from '@REDUXITF/patient'
import style from './AuxiliaryTraining.module.scss'

interface TrainingContentITF {
  title: string
  desc: string
  btnText: string
  route?: string
  payload: null | { title?: string; path?:string; h5path?:string }
  eventTitle: string
  image: string
  enabledVerify?: boolean
  isContact?: boolean
}

const getTrainingContent = (tags?: TagITF[]): TrainingContentITF[] => {
  const payload = { title: '科普视频' }
  if (Array.isArray(tags) && tags.length > 0) {
    const fTagIds = getTagIds(tags)
    Object.assign(payload, { tIds: JSON.stringify(fTagIds), queryAssociateTag: true })
  }
  const content: TrainingContentITF[] = [
    // {
    //   title: '冥想训练',
    //   desc: '缓解疼痛 改善睡眠',
    //   btnText: '去训练',
    //   route: 'meditation',
    //   payload: null,
    //   eventTitle: '冥想',
    //   image: Images.managePlan.icon_u_can_meditation
    // }
    {
      title: '图文咨询',
      desc: '缓解疼痛 改善睡眠',
      btnText: '问医生',
      route: 'doctorList',
      payload: null,
      eventTitle: '医生列表',
      image: Images.managePlan.icon_u_can_ask
    }
  ]
  if (isShowVideo()) {
    content.push({
      title: '科普视频',
      desc: '专业靠谱的疼痛科普',
      btnText: '去观看',
      route: 'videoList',
      payload,
      eventTitle: '视频',
      image: Images.managePlan.icon_u_can_video
    } as TrainingContentITF)
  }
  const otherData: TrainingContentITF[] = [
    // {
    //   title: '疼痛自测',
    //   desc: '智能测评 个性化推荐',
    //   btnText: '去测试',
    //   route: 'decisionList',
    //   payload: null,
    //   eventTitle: '测评',
    //   image: Images.managePlan.icon_u_can_test
    // }
    {
      title: '疼爱精选',
      desc: '智能测评 个性化推荐',
      btnText: '去选购',
      route: 'wmpRoute',
      payload: STORE_ROUTER_DATA,
      eventTitle: '',
      image: Images.managePlan.icon_u_can_select
    }
  ]
  return [
    ...content,
    ...otherData
  ]
}

const AuxiliaryTraining: React.FC<{ disabled: boolean; tags?: TagITF[]; showLogin?: () => void; isShowTopLine: boolean; hasPlan?: boolean }> = (
  { disabled, tags, showLogin, isShowTopLine, hasPlan = false }
) => {
  const TrainingContent = getTrainingContent(tags)
  const data = disabled ? [TrainingContent[0]] : TrainingContent
  return (
    <View className={`${style.container} ${isShowTopLine ? style.topLine : ''}`}>
      <View className={style.containerClass}>
        <View className={style.block} />
        <Text className={style.rightTitle}>大家都在用</Text>
      </View>
      <View className={style.cardList}>
        {
          data.map((item, idx) => (
            <RenderCard key={item.title} data={item} showLogin={showLogin} hasPlan={hasPlan} />
          ))
        }
      </View>
    </View>
  )
}

const RenderCard: React.FC<{ data: TrainingContentITF; showLogin?: () => void; hasPlan: boolean }> = ({
  data, showLogin, hasPlan
}) => {
  const { title, route, image, payload, btnText, enabledVerify, eventTitle, isContact } = data
  const { myPatientsLoading } = useSelector<RootStateITF, PatientStateITF>(state => state.patient)
  const { eventId } = Analytic_Type.tap_pain_manage_do_task
  const eventParams = { title: eventTitle || '', isJoinPlan: hasPlan ? '已加入计划' : '未加入计划' }
  const onClick = () => {
    Taro.tracker.trackEvent(eventId, eventParams)
    if (isContact) {
      Taro.previewImage({
        current: Images.managePlan.image_plan_contact,
        urls: [Images.managePlan.image_plan_contact]
      })
      return
    }
    if (route !== 'createPainLog') {
      openPage(route, payload)
      return
    }
    if (myPatientsLoading) return
    Navigate.createPainLog()
  }
  return (
    <View className={style.cardContainer}>
      <LoginVerifyBtn
        onClick={onClick}
        disabledVerify={!enabledVerify}
        eventId={eventId}
        eventParams={eventParams}
        className={style.cardClass}
        showLogin={showLogin}
      >
        <View className={style.card}>
          <View className={style.content}>
            <Text className={style.title}>{title}</Text>
            <View className={style.btnContainer}>
              <Text className={style.btnText}>{btnText}</Text>
            </View>
          </View>
          <Image src={image} className={style.icon} />
        </View>
      </LoginVerifyBtn>
    </View>
  )
}

export default AuxiliaryTraining
